<template>
  <div name="Interaction">
    <div class="s-interaction">
      <div class="left-content">
        <div class="menu">
          <p>
            <dsfimg :src="leftTopImg" :error-src="config.setting_img" />
          </p>
          <ul>
            <li :class="{ act: active == index }" @click="changeMenu(index)" v-for="(d, index) in menulist" :key="d.name">
              {{ d.name }}
            </li>
          </ul>
        </div>
      </div>
      <div class="right-content">
        <div class="title">
          <dsfimg :src="rightTopImg" :error-src="config.setting_img" />
        </div>
        <div class="item-content">
          <Component :is="Com" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import InteractionList from "./InteractionList";
import InteractionConsult from "./InteractionConsult";
import InteractionDemand from "./InteractionDemand";
export default {
  name: "Interaction",
  components: {
    InteractionList,
    InteractionConsult,
    InteractionDemand,
  },
  data() {
    return {
      leftTopImg: require("../../../assets/imgs/pc/hdjl.png"),
      menulist: [
        { name: "互动交流", Com: "InteractionList" },
        { name: "咨询建议", Com: "InteractionConsult" },
        { name: "数据需求", Com: "InteractionDemand" },
      ],
      Com: InteractionList,
      active: 0,
      rightTopImg: require("../../../assets/imgs/pc/renwu.png"),
    };
  },
  methods: {
    changeMenu(index) {
      this.active = index;
      this.Com = this.menulist[index].Com;
    },
  },
};
</script>
